<template>
    <div class="container">
        <div class="left" :style="{ backgroundColor: currentThemeColor }">
            <div class="logo" :style="{ width: isCollapse ? '64px' : '200px', backgroundColor: currentThemeColor }">
                <div>{{ !isCollapse ? '企业通用系统' : '系统' }}</div>
            </div>


            <el-menu active-text-color="#ffd04b" :background-color="currentThemeColor" :collapse="isCollapse" router
                class="el-menu-vertical-demo" default-active="1" text-color="#fff">

                <template v-for="(item, index) in menus">
                    <el-sub-menu :index="index">
                        <template #title>
                            <span>{{ item.parentName }}</span>
                        </template>
                        <template v-for="(item2, index2) in item.childrens">
                            <el-menu-item :index="item2.url">{{ item2.name }}</el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
                
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>账户管理</span>
                    </template>
                    <el-menu-item index="1-1">角色管理</el-menu-item>
                    <el-menu-item index="1-2">账户管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <span>客房管理</span>
                    </template>
                    <el-menu-item index="1-1">类型管理</el-menu-item>
                    <el-menu-item index="1-2">客房管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <span>财务管理</span>
                    </template>
                    <el-menu-item index="/layout/finance">支出记录</el-menu-item>
                    <el-menu-item index="/layout/groupList">支出统计</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <span>权限管理</span>
                    </template>
                    <el-menu-item index="/layout/role">权限管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <span>字典管理</span>
                    </template>
                    <el-menu-item index="/layout/dictionary">通用字典</el-menu-item>
                </el-sub-menu>
            </el-menu>

        </div>
        <div class="right">
            <div class="top" :style="{ backgroundColor: currentThemeColor }">
                <div class="icon" @click="isCollapse = !isCollapse">
                    <el-icon size="20" v-show="isCollapse">
                        <Fold />
                    </el-icon>
                    <el-icon size="20" v-show="!isCollapse">
                        <Expand />
                    </el-icon>
                </div>
                <div class="menu">
                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal" :background-color="currentThemeColor"
                        text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="1">
                            <el-icon>
                                <House />
                            </el-icon>
                            首页
                        </el-menu-item>
                        <el-menu-item index="2">邮件</el-menu-item>
                        <el-menu-item index="3">消息</el-menu-item>
                        <el-sub-menu index="4">
                            <template #title>切换皮肤</template>
                            <el-menu-item @click="changeTheme(index)" v-for="(item, index) in getColorNames">{{ item
                            }}</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>管理员</template>
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                            <el-menu-item index="2-2">修改密码</el-menu-item>
                            <el-menu-item index="2-3" @click="exit">退出系统</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </div>
            </div>
            <div class="bottom">
                <router-view />
            </div>
        </div>
    </div>
</template>


<script>
import { reactive, toRefs, computed, onBeforeMount } from 'vue'
import { Delete, Edit, Search, Share, Upload, User, Fold, Expand, House } from '@element-plus/icons-vue'

import { useStore } from 'vuex'
import { useRouter } from 'vue-router';

export default {
    name: "layout",
    components: {
        Delete, Edit, Search, Share,
        Upload,
        User,
        Fold,
        Expand,
        House
    },
    setup() {


        let $store = useStore()
        let $router = useRouter();

        if (localStorage.getItem('color')) {
            console.log(localStorage.getItem('color'))
            $store.dispatch('theme/updateCurrentThemeColor'
                , { color: localStorage.getItem('color'), name: localStorage.getItem('colorName') }
            )
        }
        let data = reactive({
            //左侧菜单折叠
            isCollapse: false,
            menus: [
                {parentName:'反思工具',childrens:[
                    {name:'反思',url:'/layout/introspection'}
                ]}
            ]
        })

        let getColorNames = computed(() => {
            return $store.getters['theme/getColorNames']
        })

        let currentThemeColor = computed(() => {
            return $store.state.theme.currentThemeColor.color;
        })

        let changeTheme = (index) => {
            let color = $store.state.theme.colors[index]

            localStorage.setItem('color', color.color)
            localStorage.setItem('colorName', color.name)

            $store.dispatch('theme/updateCurrentThemeColor', color)
        }

        let exit = () => {
            sessionStorage.clear()
            localStorage.clear()
            $router.push('/login')
        }

        onBeforeMount(() => {
            let token = sessionStorage.getItem('token')
            //判断有无token,有token,才表示登录成功
            if (!token) {
                //跳转到登录页
                $router.push('/login')
            }
        })

        return {
            ...toRefs(data),
            getColorNames,
            currentThemeColor,
            changeTheme,
            exit
        }
    }

};


</script>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    display: flex;

    .left {
        transition: all 0.5s;

        .logo {
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;

            div {
                color: white;
                font-size: 18px;
                border: 1px solid #eee;
                padding: 4px 10px;
                border-radius: 4px;
                //不收缩
                flex-shrink: 0;
            }
        }
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;

        .top {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            // flex-direction: row-reverse;
            // background-color: #545c64;

            .icon {
                color: white;
                padding-left: 10px;
            }

            .menu {
                width: 500px;
            }
        }

        .bottom {
            flex: 1;
            background: white;
        }
    }
}
</style>